<template>
  <div class="WaterDrop flex-center">
    <div class="water"></div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.WaterDrop {
  width: 100%;
  height: 100%;
  background-color: #0aabff;
  .water {
    position: relative;
    width: 200px;
    height: 200px;
    margin: auto;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    box-shadow: 10px 15px 20px rgba($color: #000000, $alpha: 0.3),
      15px 20px 20px rgba($color: #000000, $alpha: 0.1),
      10px 10px 20px rgba($color: #000000, $alpha: 0.5) inset,
      -10px -15px 20px rgba($color: #fff, $alpha: 0.3) inset;
    animation: changeRadius 8s linear 0s alternate infinite;
    &::after {
      content: '';
      position: absolute;
      top: 20%;
      left: 28%;
      width: 30px;
      height: 30px;
      background-color: rgba($color: #fff, $alpha: 0.6);
      border-radius: 30% 70% 45% 55% / 30% 30% 70% 70%;
      filter: blur(2px);
    }
  }

  @keyframes changeRadius {
    25% {
      border-radius: 30% 70% 45% 55% / 30% 30% 70% 70%;
    }
    50% {
      border-radius: 55% 45% 45% 55% / 30% 30% 70% 70%;
    }
    75% {
      border-radius: 65% 35% 45% 55% / 30% 53% 47% 70%;
    }
    100% {
      border-radius: 66% 34% 61% 39% / 49% 70% 30% 51%;
    }
  }
}
</style>
